<template>
  <el-descriptions size="medium">
    <div slot="title" class="title" v-if="title">
      <div class="icon"></div>
      <div class="text">{{ title }}</div>
      <el-tag :type="type">{{ status }}</el-tag>
    </div>
    {{ list }}
    <el-descriptions-item
      v-for="(ite, i) in list"
      :label="ite.label"
      :key="i"
      >{{ ite.value }}</el-descriptions-item
    >
  </el-descriptions>
</template>
<script>
export default {
  name: "descriptions",
  props: {
    title: { type: String, default: "" },
    list: { type: Array, default: [] },
    status: { type: String, default: "" },
    type: { type: String, default: "info" },
  },
};
</script>
<style scoped lang="scss">
.title {
  display: flex;
  align-items: center;

  .icon {
    width: 4px;
    height: 16px;
    background-color: #00bfa5;
    margin-right: 10px;
  }
}
</style>
